<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>统计页面</title>
<script src="plugin/jquery-3.3.1.min.js"></script>
<script src="plugin/echart/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 500px;height:300px;"></div>
<script type="text/javascript">
    //用于转换后台json数据
	var convertYData = function (data) {
	    var totalNums=[];
	    for(let i=0;i<data.length;i++){
	    	totalNums.push(data[i].totalNum);
	    }
	    return totalNums;
	 };
	 var convertXData = function (data) {
        var types=[];
        for(let i=0;i<data.length;i++){
            types.push(data[i].typeName);
        }
        return types;
	 };
	 
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
       title: {
           text: '商品分布',
       },
       tooltip : {
       },
       legend: {
           data:['商品数']
       },
       xAxis: {
           data: []
       },
       yAxis: {},
       series : [
           {
               name: '数量',
               type: 'bar',
           }
       ]
    });
    
    $.get('/goods/goodsGroup').done(function (data) {
    	// 填入数据
        myChart.setOption({
            xAxis: {
                data: convertXData(data)
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '数量',
                data: convertYData(data)
            }]
        });
    })
</script>
</body>
</html>